@()(implicit session: Session)
@home.main("Browse"){
  <style>
          .form-group {
            margin-bottom: 5px;
          }

          .radio, .checkbox {
            position: relative;
            display: block;
            margin-top: 5px;
            margin-bottom: 10px;
          }
  </style>
  <div class="row">
    <div class="form-group col-sm-12">
      <h2 class="page-heading">Browse</h2>
    </div>
  </div>
  <label>Select the columns to display:</label>
  <div id="checkbox" class="checkbox">

  </div>
  <div id="toolbar">
      &nbsp;Keyword：
  </div>

  <table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
  data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
  >
    <thead>
      <tr>
        <th data-field='geneid' data-sortable='true' id="marker">GeneID</th>

      </tr>
    </thead>
  </table>
  <div id="charts" align="center"></div>
  <script>
          function setColumns(value) {
            var element = $("input:checkbox[value=" + value + "]")
            if (element.is(":checked")) {
              $('#table').bootstrapTable('showColumn', value);
            } else {
              $('#table').bootstrapTable('hideColumn', value);
            }
          }

          $(document).ready(function () {

            var array = ["Chr", "Start", "End",  "GOs", "NOG", "Function", "KO", "KEGG_GENE_NAME","NR_tophit_name",
              "NR_tophit_description","Swissprot_tophit_name", "Swissprot_tophit_description"];

            var values = ["chr", "start", "end", "gos", "nog", "function", "ko", "keggGeneName", "nrTophitName",
              "nrTophitDescription","swissprotTophitName", "swissprotTophitDescription"];
            var thHtml="";
            $.each(array, function (i, v) {
              thHtml += "<th data-field='" + values[i] + "' data-sortable='true'>" + v + "</th>"
            });
            $("#marker").after(thHtml);


            var html = "";
            $.each(array, function (n, value) {
                      html += "<label style='margin-right: 15px'>" +
                              "<input type='checkbox' checked='checked' value='" + values[n] + "' onclick=\"setColumns('" + values[n] + "')\">" + value +
                              "</label>"
                    }
            );
            $("#checkbox").append(html);

            $('#table').bootstrapTable({
              method: 'post',
              url: "@routes.RnaController.getAllGene()",
              sidePagination: "server",
              pageNumber: 1,
              pagination: true,
              pageList: [10, 25, 50, 100],
              contentType: "application/x-www-form-urlencoded"
            });

            var hiddenArray = ["nrTophitName","nrTophitDescription","swissprotTophitName","swissprotTophitDescription"];

            $.each(hiddenArray, function (n, value) {
                      $('#table').bootstrapTable('hideColumn', value);
                      $("input:checkbox[value=" + value + "]").attr("checked", false)
                    }
            );


          })

  </script>



}